<template>
    <div>
        <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="30%" style="text-align: left">
            <table style="font-weight: bold">
                <tr>
                    <td><label for="label_11">分组名: <span style="color: red">*</span></label></td>
                    <td>
                        <el-input
                            type="input"
                            placeholder="请输入内容"
                            v-model="group_name"
                            id="label_11"
                            style="width: 250px"
                        >
                        </el-input>
                    </td>
                </tr>
            </table>

            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleAddOrEditUserGroup">保 存</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "GroupUserListAddOrEdit",
        data() {
            return {
                group_name: "",
                dialogTitle: "新增组名",
                dialogFormVisible: false,
                action: "",
                groupId: ""
            }
        },
        methods: {
            handleOpen(rowData='') {
                if (rowData === '') {
                    this.group_name = "";
                    this.action = "add";
                } else {
                    this.dialogTitle = "编辑组名";
                    this.group_name = rowData.group_name;
                    this.groupId = rowData.id;
                    this.action = "edit";
                }
                this.dialogFormVisible = true;
            },
            handleAddOrEditUserGroup() {
                let action = this.action;
                let url = action === "add" ? `/api/user/addOrEditgroup/${this.action}` : `/api/user/addOrEditgroup/${this.action}?group_id=${this.groupId}`
                this.AXIOS.post(url, {"group_name": this.group_name})
                    .then((res) => {
                        // console.log(res.data.status);
                        if (res.data.status === 1) {
                            this.$message({
                                type: "success",
                                message: action === "add" ? "新增成功!" : "修改成功!",
                            });
                            this.dialogFormVisible = false;
                            // 刷新
                            this.$parent.handleInitUserGroupListData()
                        }
                    })
                    .catch((err) => {
                        this.$message({
                            type: "error",
                            message: err,
                        });
                });

            }
        }
    }
</script>

<style scoped>

</style>
